<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/axios.min.js"></script> 
    <style>
         .item{width: 1536px;height: 712.5px;}
         .head{width: 1536px;height: 48px;background-color: rgb(240, 161, 161);}
         .head img{float: left;margin-left: 230px;width: 155px;height: 50px;margin-top: 4px;}
         #main{width: 600px;height: 398px;margin: 80px auto;}
         #main h1{margin-bottom: 30px;font-size: 40px;margin-left: 50px;}
         #main input{outline: none;}
         #main span {font-size: 16px;color: grey;}
         #list1{width: 420px;height: 50px;border-bottom: 2px rgb(189, 187, 187) solid;margin: 0 auto;margin-bottom: 20px;position: relative;}
         #list1 li{float: left;height: 50px;line-height: 60px;color: rgb(189, 188, 188);}
         .first input{width: 420px;height: 45px;margin-top:20px;margin-left: 90px;border-radius: 5px;border: 0.5px solid black;position: relative;text-indent: 1em;}
         .first input:nth-child(5){background-color: rgb(240, 161, 161);color: white;font-size: 18px;border: none;}
         .first span{position: absolute;top: 336px;right: 563px;}
         .first a{font-size: 14px;color: blue;}
         .list2{width: 420px;height: 50px;margin: 0 auto;}
         .list2 li{float: right;width: 70px;height: 40px;text-align: center;line-height: 60px;}
         .list2 a{color: blue;font-size: 14px;text-decoration: underline;}
         #main div{display: none;}

         .foot{width: 1536px;height: 37px;}
         .foot p{text-align: center;line-height: 37px;font-size: 12px;color: rgb(146, 144, 144);}
         .foot span{margin-left: 70px;}
         .foot a{color: blue;}
         .foot a:hover{text-decoration: underline;}
    </style>
</head>
<body>
    <div class="item">
           <div class="head">
           </div>
           <div id="main">
                 <h1>注册<span>&nbsp;新的账号</span></h1>
                 <ul id="list1">
                     <li style="color: rgb(14, 13, 13);font-weight: 600;">手机号注册</li>
                 </ul>
                <div class="first" style="display: block;">
                 <input type="text" placeholder="请输入你的手机号"><span><a href=""></a></span><br>
                 <input type="password" placeholder="请输入由字母数字组成的六位密码">
                 <input type="button" value="注册">
                 <ul class="list2">
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/login.html">登录</a></li>
                 </ul>
                </div>
           </div>
           <div class="foot">
             <p>版权所有&copy;E宠有限公司。 1998-2022 保留一切权利。 粤A2-20044005号<span><a href="">隐私声明</a></span></p>
           </div>
    </div> 

       
    <script>
     let ipts = document.querySelectorAll("input");
        ipts[2].onclick = function () {
            let username = ipts[0].value;
            let password = ipts[1].value;

            let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
            axios.get(regAPI, { params: { username: username, password: password } })
                .then((r) => {
                    console.log(r.data);
                    alert(r.data.msg);
                    if (r.data.code == 1) {
                          location.href ="login.html";
                    }
                })
        }
    </script>
           
</body>
</html>